<template>
	<view>
		<view style="padding: 0 30rpx;">
			<u-form :model="form" ref="uForm" label-width="auto">
				<!-- 上传图片 -->
				<u-form-item label="身份证图片">
					<u-upload ref="uUpload" :auto-upload="false" :show-progress="true" @on-list-change="onListChange" :file-list="fileList" :max-count="1"
						:form-data="{path:'/static/img/custom_front_img/'}" :multiple="false">
					</u-upload>
				</u-form-item>
				<u-form-item label="客户类型" prop="custom_type">
					<u-radio-group v-model="form.custom_type">
						<u-radio v-for="(item, index) in [{value:1,name:'个人'},{value:2,name:'单位'}]" :key="index"
							:name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="手机号" prop="custom_tel">
					<u-input placeholder="请输入手机号" v-model="form.custom_tel" />
				</u-form-item>
				<u-form-item label="客户姓名" prop="custom_name">
					<u-input placeholder="请输入客户姓名" v-model="form.custom_name" />
				</u-form-item>
				<view v-if="form.custom_type==2">
					<u-form-item label="单位名称"><u-input placeholder="请输入单位名称" v-model="form.unit_name" /></u-form-item>
					<u-form-item label="单位部门">
						<u-input placeholder="请输入部门名称" v-model="form.unit_dept_name" />
					</u-form-item>
				</view>
				<u-form-item label="客户地址"><u-input placeholder="请输入客户地址" v-model="form.custom_address" /></u-form-item>
				<u-form-item label="客户生日"><u-input placeholder="请输入客户生日" v-model="form.custom_birthday" /></u-form-item>
				<u-form-item label="身份证号"><u-input placeholder="请输入身份证号" v-model="form.custom_idcard" /></u-form-item>
				<u-form-item label="客户性别">
					<u-radio-group v-model="form.custom_gender">
						<u-radio v-for="(item, index) in [{value:1,name:'男'},{value:2,name:'女'}]" :key="index"
							:name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="客户民族"><u-input placeholder="请输入客户民族" v-model="form.custom_nation" /></u-form-item>
				
				<u-form-item label="联系人">
					<u-input placeholder="请输入联系人" v-model="form.custom_contact_name" />
				</u-form-item>
				<u-form-item label="联系电话">
					<u-input placeholder="请输入联系电话" v-model="form.custom_contact_tel" />
				</u-form-item>
				<u-form-item label="备注">
					<u-input placeholder="请输入备注" v-model="form.remark" />
				</u-form-item>
				<u-form-item>
					<u-button type="primary" @click="submit">保存客户</u-button>
				</u-form-item>
				<u-form-item>
					<view style="display: flex;justify-content: center;">
						<text @click="show=true" style="color: #fa3534;font-weight: bold;">删除客户</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<u-modal v-model="show" @confirm="deleteCustom" title="确定删除吗？" :content="'确定客户 【'+form.custom_name+'】 吗？'" :show-cancel-button="true">
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	export default {
		data() {
			return {
				show:false,
				fileList:[],
				form: {
					custom_type: 1,
					custom_name: '',
					custom_address: '',
					custom_idcard: '',
					custom_gender: '',
					custom_nation: '',
					unit_name: '',
					unit_dept_name: '',
					custom_tel: '',
					custom_contact_name: '',
					custom_contact_tel: '',
					remark: ''
				},
				rules: {
					custom_name: [{
						required: true,
						message: '请输入客户姓名',
						trigger: ['blur', 'change']
					}],
					custom_tel: [{
						required: true,
						message: '请输入客户手机号',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			if(options.custom){
				this.form=JSON.parse(decodeURIComponent(options.custom));
				console.log(this.form);
				if(this.form.custom_front_img){
					this.fileList=[{
						url:'https://cos2.ksmeilv.com'+this.form.custom_front_img
					}]
				}
			}
		},
		methods: {
			deleteCustom(){
				var that=this;
				
				that.$http.get('/custom/deleteById?custom_id='+that.form.custom_id,{} , (res) => {
					if (res.data.success) {
						that.$refs.uToast.show({
							title: '删除成功',
							type: "success"
						});
						uni.navigateBack();
						uni.$emit("getCustomList", that.data);
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			submit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var that = this;
						that.$http.post('/custom/update', that.form, (res) => {
							if (res.data.success) {
								that.$refs.uToast.show({
									title: '保存成功',
									type: "success"
								});
								uni.$emit("getCustomList", that.data);
								uni.navigateBack();
							} else {
								that.refs.myModal.show('请求失败', res.data.result.message);
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			onListChange() {
				var that = this;
				var list = this.$refs.uUpload.lists;
				var dir = '/static/img/custom_front_img/';
				cos.uploadFiles(list, dir, (data) => {
					console.log(data);
					var options = data.files[0].options;
					var imgUrl = 'https://cos2.ksmeilv.com' + options.Key;
					var that = this;
					that.$http.post('/vehicleLicense/IDCardOCR', {
						url: imgUrl
					}, (res) => {
						console.log(res);
						if (res.data.success) {
							that.form = res.data.result;
							that.form.custom_type=1
							// that.form.custom_birthday = res.data.result.Birth.replaceAll('/','-');
						} else {
							that.refs.myModal.show('请求失败', res.data.result.message);
						}
					});
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>



</style>